<template>
  <div>
    <el-dialog
              title="新增目录"
              :visible.sync="showAddSubmit"
              width="400px"
            >
              <el-form
                ref="fromData"
                :model="form"
                :rules="rules"
                label-width="80px"
              >
                <el-form-item label="所属学科" prop="subjectID">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in catalogList"
                      :key="item.id"
                      :label="item.subjectName"
                      :value="item.subjectID"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="目录名称" prop="directoryName">
                  <el-input
                    v-model="form.directoryName"
                    autocomplete="off"
                    placeholder="请输入目录名称"
                  ></el-input>
                </el-form-item>

                <slot name="one"></slot>
                <slot name="two"></slot>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDirectory">取 消</el-button>
                <el-button type="primary" @click="newDirectory"
                  >确 定</el-button
                >
              </div>
     </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showAddSubmit: {
      // 限定参数的类型为字符串型
      type: Boolean, // 新增目录弹窗
      // 指定参数默认值为字符串“你好”
      default: false
    },
    catalogList: []
  },
  data () {
    return {
      form: {
        subjectID: '',
        directoryName: ''
      },
      // 校验规则
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'change' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      }

    }
  },
  methods:{
     // 确定新增目录
    newDirectory () {
      // 兜底验证
      this.$refs.fromData.validate(async (valid) => {
        // 表单没有值则退出
        if (!valid) return
        // 有值则调用添加目录接口
        await add(this.form)
        // console.log(res)
        // 成功后给用户提示
        this.$message.success('新增目录成功')

        // 重新渲染一下页面
        this.getCatalogList()
        // 关闭弹窗
        this.showAddSubmit = false
        // 重置表单
        this.$refs.fromData.resetFields()
      })
    },
  }
}
</script>
